<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#myCanvas{
	background-color:#CCC;
	border:solid thin  #666;
}
</style>
</head>

<body>
<canvas id="myCanvas" width="640" height="480"></canvas>
</body>
</html>

<script language="javascript">
	window.onload = function()
	{	
		var screenWidth = 640;
		var screenHeight = 480;		
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");	
		var m = new Array();

		
		function obox () {
			this.x=null;
			this.y=null;
			this.width=null;
			this.height=null;
			this.spx=null;
			this.spy=null;
			
			this.run = function()
			{
				this.x = this.x + this.spx;
				this.y = this.y + this.spy;
				
				if ( this.x > 640 || this.x < 0 )
				{
					this.spx = this.spx * (-1);
				}
				
				if ( this.y > 480 || this.y < 0)
				{
					this.spy = this.spy * (-1);
				}
				
			}
		}
		
		str = "";
		for ( var i = 0; i < 10; i++)
		{			
			m[i] = new obox();
			m[i].x = Math.random() * screenWidth;
			m[i].y = Math.random() * screenHeight;
			m[i].width = Math.random() * 20 + 10;
			m[i].height = Math.random() * 20 + 10;	
			m[i].spx = Math.random() * 5 + 1;
			m[i].spy = Math.random() * 5 + 1;
		}					
		
		
		setInterval(mainLoop, 10);
		
		
		function mainLoop()
		{	
			// Clear Screen			
			context.clearRect(0, 0, screenWidth, screenHeight);									

//			context.font = "40pt Arial";
			context.fillText( "Example: HTML5 boxes 2", 20 , 20 );			
			
			str = "";
			for ( var i = 0; i < 10; i++)
			{
				m[i].run();
				context.beginPath();
				draw(m[i]);
				context.closePath();
				context.stroke();
				str = str + " " + m[i].x;				
			}
			
			context.fillText( str, 20 , 40 );
		}				
			
		function draw(obj){				
				context.rect( obj.x, obj.y, obj.width, obj.height );				
			}
		
		
	}
	
	
</script>
